@import './variables.scss';
@import './mixin.scss';

$--menu-item-height: 48px;
$text-color: #303133;
// 顶部条的高度
$header-height: 64px;
$header-title-color: #1c7dc0;
$drak-main-color: #333;

// 定义一个mixin来处理hover和is-opened状态的背景色
@mixin hover-and-opened-bg {
  background-color: $main-color !important;
}

// 定义一个mixin来处理hover和is-opened状态的文字颜色
@mixin hover-and-opened-text {
  color: #fff !important;
}

body {
  font-size: $font-size-small-x;
  margin: 0;
  font-family: $baseFontFamily;
  background: #f5f5f5;
}
a:hover {
  color: $main-color;
}

>.el-scrollbar>.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}

.layout-workbench {
  height: 100vh;
  .header {
    width: 100%;
    height: $header-height;
    background: #fff;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    .logo-info {
      display: flex;
      align-items: center;
    }
    .logo-info .logo-img {
      width: 110px;
      height: 34px;
      margin-left: 24px;
      img {
        width: 100%;
      }
      // margin-top: 15px;
    }
    .logo-info .logo-title {
      font-weight: 500;
      color: $header-title-color;
      font-size: 22px;
      line-height: 26px;
      margin-left: 16px;
      // margin-top: 19px;
    }
  }
  .main-panel.page-container {
    box-shadow: none;
  }

  .page-container {
    width: 100%;
    display: flex;
    position: relative;
    transition: 0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1);
    align-items: stretch;
    // overflow: hidden;
    // margin-bottom: 100px;
    .page-main-content {
      width: $page-main-content-width;
      .main-content{
        padding: 24px;
        // min-height: calc(100% - 32px - 24px);
      }
    }
  }
  .side-container{
    align-self: stretch;
    background: #fff;
    height: calc(100vh - 65px);
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .workbench-sidebar .el-menu-vertical-demo {
    &:not(.el-menu--collapse) {
      width: 200px;
    }
    &.el-menu {
      border-right: 0;
    }
    .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
      transform: rotateZ(0deg);
    }
    .el-submenu__icon-arrow {
      transform: rotate(-90deg);
    }
    .menu-title-icon {
      margin-right: 8px;
    }
    .menu-title,
    .menu-subtitle {
      height: 22px;
      color: $font-color-base;
      font-size: 14px;
      line-height: 22px;
    }
    .el-submenu__title {
      height: $--menu-item-height;
      line-height: $--menu-item-height;
    }
    .el-menu-item {
      line-height: $--menu-item-height;
      height: $--menu-item-height;
      padding: 0;
      padding-left: 0 !important;
      a {
        display: block;
        padding-left: 20px;
      }
      &.is-active .menu-title {
        color: $main-color;
      }
    }
    // 二级菜单
    .el-submenu {
      .el-menu {
        // 三级菜单
        .el-submenu {
          .el-submenu__title {
            padding-left: 54px !important;
          }
          .el-menu {
            margin-left: 54px;
            border-left: 1px solid #e5e5e5;
            margin-top: 8px;
            margin-bottom: 8px;
          }
          .el-menu-item {
            min-width: 0;
            &.is-active {
              background-color: #fff !important;
              .menu-title {
                color: $main-color;
              }
              .menu-item-link {
                border-left: 1px solid $main-color;
                color: $main-color;
              }
            }
          }
        }
      }
    }
    > .el-submenu {
      &.is-active, &.is-opened {
        >.el-submenu__title .menu-title {
          color: $main-color;;
        }
      }
      .el-menu.el-menu--inline {
        padding-left: 0;
      }
    }
    .el-menu-item-group__title {
      display: none;
    }
    > .el-menu-item {
      &.is-active .menu-title {
        color: $main-color;
      }
    }
    > .el-submenu {
      > .el-menu--inline {
        padding-left: 10px;
      }
    }

    .el-submenu__title i {
      color: $font-color-base;
      font-weight: bold;
    }
    .el-badge__content {
      background-color: #ff3f3b;
      margin-left: 10px;
      margin-top: -5px;
    }

    .el-menu--collapse {
      .is-opened {
        @include hover-and-opened-bg;
      }
    
      .el-menu-item:hover {
        @include hover-and-opened-bg;
    
        .menu-title {
          @include hover-and-opened-text;
        }
      }
    
      .el-submenu__title:hover {
        @include hover-and-opened-bg;
    
        .menu-title {
          @include hover-and-opened-text;
        }
      }
    }
  }

  .draft-header {
    height: 32px;
    background: #fff;
    padding-left: 26px;
    .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
      color: $main-color;
    }
    .el-breadcrumb {
      line-height: 32px;
    }
  }
  .draft-header-text {
    margin-left: 8px;
  }
}
